<template>
  <div>

    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        default-active = "from"
        router
      >

      <el-menu-item index="/from">
        主页
      </el-menu-item>

      <el-menu-item index="/personnel">
        人事档案
      </el-menu-item>

      <el-menu-item index="/organization">
        组织架构
      </el-menu-item>

      <el-submenu index="null1">
        <template slot="title">招聘管理</template>
        <el-menu-item index="/recruit">招聘计划</el-menu-item>

        <el-submenu index="2-1">
          <template slot="title">人才管理</template>
          <el-menu-item index="/employee">人才库</el-menu-item>
          <el-menu-item index="/talentDetails">人才详情</el-menu-item>
          <el-menu-item index="/report">人才报表</el-menu-item>
        </el-submenu>
      </el-submenu>

      <el-submenu index="3-1">
          <template slot="title">系统设置</template>
          <el-menu-item index="/corporation">公司设置</el-menu-item>
          <el-menu-item index="/slide">幻灯片设置</el-menu-item>
          <el-menu-item index="/user">用户设置</el-menu-item>
      </el-submenu>

      <div class="user_info">

        <el-link type="primary" style="color:#000" @click.prevent="skipUser"> <span>{{ user.nickName }}</span></el-link>
        <span>
          <el-avatar :src="user.avatar" style="margin-top:10px"></el-avatar>
        </span>
      </div>

    </el-menu>
  </div>
</template>

<script>
import {basicUserMsg} from "@/api/auth/login";

export default {
  data(){
    return {
      activeIndex: '1',
      activeIndex2:"1",
      token:this.$cookies.get("token"),
      user:{}
    }
  },
  created() {
    this.getUserMsg()
  },

  methods: {
    handleSelect(key, keyPath) {

    },
    async getUserMsg(){
      const {data:res} = await basicUserMsg(this.token)
      this.user = res.data.user
    },
    skipUser(){
      this.$router.push({path:'/user'})
    }
  }
}
</script>

<style scoped>
.user_info{
  position: absolute;
  right: 30px;
}
</style>
